<script setup>
import { ref } from 'vue';

const singleSelectValue = ref('option1');
const multiSelectValues = ref(['option1', 'option3']);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">ListBox Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic ListBox</h3>
        <div class="flex flex-col space-y-4">
          <p class="mb-2">Single Selection</p>
          <div class="rounded border p-2">
            <ListBox v-model:value="singleSelectValue">
              <Option value="option1">Option 1</Option>
              <Option value="option2">Option 2</Option>
              <Option value="option3">Option 3</Option>
              <Option value="option4" disabled>Option 4 (Disabled)</Option>
            </ListBox>
          </div>
          <div>Selected value: {{ singleSelectValue }}</div>

          <Button appearance="outline" @click="singleSelectValue = 'option3'">
            Select Option 3 Programmatically
          </Button>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Multiple Selection ListBox</h3>
        <div class="flex flex-col space-y-4">
          <p class="mb-2">Multiple Selection</p>
          <div class="rounded border p-2">
            <ListBox v-model:value="multiSelectValues" multiple>
              <Option value="option1">Option 1</Option>
              <Option value="option2">Option 2</Option>
              <Option value="option3">Option 3</Option>
              <Option value="option4">Option 4</Option>
              <Option value="option5" disabled>Option 5 (Disabled)</Option>
            </ListBox>
          </div>
          <div>Selected values: {{ multiSelectValues.join(', ') }}</div>

          <Button
            appearance="outline"
            @click="multiSelectValues = ['option2', 'option4']"
          >
            Select Options 2 & 4 Programmatically
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>
